{% extends "example_base.html" %}

{% comment%}
example subscription purchase page, very closely based on https://stripe.com/docs/stripe-js/elements/quickstart
{% endcomment %}

{% block header_js %}
{{ block.super }}

<script src="https://js.stripe.com/v3/"></script>
{% endblock %}

{% block header_css %}
{{ block.super }}

<style>
    /**
     * The CSS shown here will not be introduced in the Quickstart guide, but shows
     * how you can use CSS to style your Element's container.
     */
    .StripeElement {
        box-sizing: border-box;

        height: 40px;

        padding: 10px 12px;

        border: 1px solid transparent;
        border-radius: 4px;
        background-color: white;

        box-shadow: 0 1px 3px 0 #e6ebf1;
        -webkit-transition: box-shadow 150ms ease;
        transition: box-shadow 150ms ease;
    }

    .StripeElement--focus {
        box-shadow: 0 1px 3px 0 #cfd7df;
    }

    .StripeElement--invalid {
        border-color: #fa755a;
    }

    .StripeElement--webkit-autofill {
        background-color: #fefde5 !important;
    }
</style>

{% endblock %}

{% block content %}

<section class="section">
    <div class="container">

        <h1 class="is-size-3">Example purchase of a Subscription</h1>


        <form action="" method="post" id="payment-form">
            {% csrf_token %}
            {{form}}

            <div class="form-row">
                <label for="card-element">
                    Credit or debit card
                </label>
                <div id="card-element">
                    <!-- A Stripe Element will be inserted here. -->
                </div>

                <!-- Used to display form errors. -->
                <div id="card-errors" role="alert"></div>
            </div>

            <button class="button">Submit Payment</button>
        </form>

    </div>
</section>

<script>
    // Create a Stripe client.
    var stripe = Stripe('{{ STRIPE_PUBLIC_KEY }}');

    // Create an instance of Elements.
    var elements = stripe.elements();

    // Custom styling can be passed to options when creating an Element.
    // (Note that this demo uses a wider set of styles than the guide below.)
    var style = {
        base: {
            color: '#32325d',
            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
            fontSmoothing: 'antialiased',
            fontSize: '16px',
            '::placeholder': {
                color: '#aab7c4'
            }
        },
        invalid: {
            color: '#fa755a',
            iconColor: '#fa755a'
        }
    };

    // Create an instance of the card Element.
    var card = elements.create('card', {style: style});

    // Add an instance of the card Element into the `card-element` <div>.
    card.mount('#card-element');

    // Handle real-time validation errors from the card Element.
    card.addEventListener('change', function (event) {
        var displayError = document.getElementById('card-errors');
        if (event.error) {
            displayError.textContent = event.error.message;
        } else {
            displayError.textContent = '';
        }
    });

    // Handle form submission.
    var form = document.getElementById('payment-form');
    form.addEventListener('submit', function (event) {
        event.preventDefault();

        // Note - slightly different from the Stripe JS Quickstart because
        // we use stripe.createSource instead of createToken
        stripe.createSource(card).then(function (result) {
            if (result.error) {
                // Inform the user if there was an error.
                var errorElement = document.getElementById('card-errors');
                errorElement.textContent = result.error.message;
            } else {
                // Send the token to your server.
                stripeSourceHandler(result.source);
            }
        });

        // stripe.createToken(card).then(function(result) {
        // if (result.error) {
        //   // Inform the user if there was an error.
        //   var errorElement = document.getElementById('card-errors');
        //   errorElement.textContent = result.error.message;
        // } else {
        //   // Send the token to your server.
        //   stripeTokenHandler(result.token);
        // }
        // });
    });

    // Submit the form with the source ID.
    function stripeSourceHandler(source) {
        // Insert the source ID into the form so it gets submitted to the server
        var form = document.getElementById('payment-form');
        var hiddenInput = form.elements["stripe_source"];
        hiddenInput.setAttribute('value', source.id);
        // Submit the form
        form.submit();
    }

    // Submit the form with the token ID.
    // function stripeTokenHandler(token) {
    //   // Insert the token ID into the form so it gets submitted to the server
    //   var form = document.getElementById('payment-form');
    //   var hiddenInput = document.createElement('input');
    //   hiddenInput.setAttribute('type', 'hidden');
    //   hiddenInput.setAttribute('name', 'stripeToken');
    //   hiddenInput.setAttribute('value', token.id);
    //   form.appendChild(hiddenInput);
    //
    //   // Submit the form
    //   form.submit();
    // }
</script>

{% endblock %}
